I have a quick question, I am attempting to refactor my code in a existing codebase, this codebase uses a render function, however I would like to replace this with a react functional component instead.

However I am getting a error when I am passing in a parameter called "searchResults" which is a list.

Here is the previous non-refactored code

 searchResults.sort((a, b) => new Date(b[0].created) - new Date(a[0].created));

const Rows = [];

searchResults.forEach((appResults, i) => {
  Rows.push({
    cells: [
      appResults[0].applicationId,
      <>{renderSuccessCount(appResults)}</>,
      prettifyDate(appResults[0].created)
    ],
    isOpen: false
  });

This is my refactored code

 const newRows = [];

searchResults.forEach((appResults, i) => {
  newRows.push({
    cells: [
      appResults[0].applicationId,
     <SuccessCount>{appResults}={appResults}</SuccessCount>,
      prettifyDate(appResults[0].created)
    ],
    isOpen: false
  });

This is the function SuccessCount (in the non refactored code, renderSuccessCount was just renamed to SuccessCount in the refactored version

    const SuccessCount = (appResults: AppResult[]) => {
    const nSuccesses = appResults.filter((result: AppResult) => result.pulseStatus === SUCCESS).length;
    return Something;
  };

My question is relatively simple how do I pass appResults into my functional component, my current refactored code gives me this error

TS2740: Type '{ children: any[]; }' is missing the following properties from type 'AppResult[]': length, pop, push, concat, and 26 more.

This is in the linter, how do I get rid of it?